
<!-- 学社首页-管理-成员组件 -->
<template>
  <view class="flex items-center py-2">
    <view v-if="showCheck">
      <u-checkbox ref="checkboxRef" @change="onCheckChange" size="40" v-model="data.selected"
        :disabled="selectDisabled" shape="circle" active-color="#F4AF22" />
    </view>
    <u-image width="60" height="60" border-radius="60" :src="data.user?.avatar"
      @click.stop="showCheck ? onSelected() : toHomePage(data.user_id)" class="mr-4" />
    <view v-if="data.member_position > 0" class="label-style" :class="`label-style${data.member_position}`">{{ identity }}
    </view>
    <view class="c-#333 text-28 w-280 text-single font-bold"
      @click.stop="showCheck ? onSelected() : toHomePage(data.user_id)">{{ data.user?.nickname }}</view>
    <!-- TODO:社长显示 -->
    <view v-if="state.userId == data.userId" class="flex-1 flex justify-end c-#999 text-28">我</view>
    <!-- 社长显示 -->
    <view v-if="showOperate && userOperate && !fromType" class="flex-1 flex justify-end items-center">
      <view class="w-60 h-60 flex justify-center items-center" @click="emit('operate', data)">
        <image class="w-32 h-6" src="/static/images/home/ic_member_operate.png" />
      </view>
    </view>
  </view>
</template>

<script setup name="member-item">
import { toHomePage } from "@/common/util/util";
import { societyIdentity } from '@/common/constant/society.js'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const emit = defineEmits(['selected', 'operate'])

const checkboxRef = ref()

const props = defineProps({
  fromType: {
    type: String,
    default: ''
  },
  data: {
    type: Object,
  },
  isCreator: {
    type: Boolean,
    default: false
  },
  showOperate: {
    type: Boolean,
    default: false
  },
  showCheck: {
    type: Boolean,
    default: false
  },
})
// const select = computed(() => {
//   return props.data.selected
// })

const state = reactive({
  userId: 0,
  userType: 1,
  isChief: true,
});

const identity = computed(() =>props.data.is_management==1?'客户经理': societyIdentity.find(v => v.value == props.data.member_position)?.label)
const userInfo = computed(() => userStore.userInfo)
const userOperate = computed(() => (props.isCreator && props.data?.member_position != 3) || (!props.isCreator && userInfo.value.id == props.data?.user_id))

// 禁用选择
const selectDisabled = computed(() => (props.fromType == 'work' && props.data?.member_position == 3) || (props.fromType == 'trend' && userInfo.value.id == props.data?.user_id))

function onSelected() {
  checkboxRef.value.toggle()
}

function onCheckChange(e) {
  emit('selected', e.value, props.data.user_id)
}
</script>

<style lang='scss' scoped>
.label-style {
  padding: 2rpx 10rpx;
  color: #fff;
  font-size: 20rpx;
  margin-right: 16rpx;
  border-radius: 6rpx;

  &3 {
    background-color: #F4AF22;
  }

  &2 {

    background-color: #6FC9E7;
  }

  &1 {
    background-color: #F8DC61;
  }
}
</style>
